 <!-- 小剧场 -->
<template>
	<view class="smallTheater_content">
		<z-paging ref="paging" :refresher-end-bounce-enabled="false" :refresher-complete-duration="300" :refresher-complete-delay="500" v-model="dataList" @query="queryList" :fixed="false" @scroll="onScroll">
			<view class="info">
				<!-- 搜索 -->
				<search></search>
				<!-- 轮播图 -->
				<banner v-if="showbanner" :dataObject="bannerData"></banner>
				<!-- 图标跳转 -->
				<jump :dataObject="jumpData" />
				<!-- 本周精选 -->
				<handpick :dataObject="handpickData" :dataPagingList="handpickPagingList" @clickToItem="clickToItemJumpVideo"></handpick>
				<!-- 优选好剧 -->
				<goodVideo :dataObject="goodVideoData" @clickToItem="clickToItemJumpVideo"/></goodVideo>
			</view>
		</z-paging>	
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import search from "../../square/smallTheater/smallTheaterSearch.vue"
	import banner from "../../square/smallTheater/smallTheaterBanner.vue"
	import jump from "../../square/smallTheater/smallTheaterJump.vue"
	import handpick from "../../square/smallTheater/smallTheaterHandpick.vue"
	import goodVideo from "../../square/smallTheater/smallTheaterGoodVideo.vue"
		
	import interfaces from "@/utils/interfaces.js"
	import config from "@/utils/config.js"
	import tools from "@/utils/tools.js"
	
	export default {
		components: {
			search,
			banner,
			jump,
			handpick,
			goodVideo
		},
		data() {
			return {
				showbanner:true,
				showOverlay:false,
				dataList:[],
				bannerData: {},
				jumpData: {},
				handpickData: {},
				handpickPagingList: [],
				rankData: {},
				goodVideoData: {},
				rankTop: 0,
				scroll_y: 0,
				isCurrentSelf: false
			}
		},
		props:{
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			data: {
				type: Object,
				default: function(){
					return {}
				}
			},
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if(newVal === this.tabIndex){
						this.isCurrentSelf = true
					} else {
						this.isCurrentSelf = false
					}
				},
				immediate: true
			},
		},
		computed: {
			...mapState({
				screenHeight: state => state.layout.screenHeight
			})
		},
		mounted() {
			if(interfaces.index.indexOf("test.")!=-1){
				this.showbanner = false;
			}
			console.log(this.data);
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.getRankLayout();
				this.requestData();
			},
			getRankLayout() {
				let container = uni.createSelectorQuery().in(this).select(".rank");
				// 利用uniapp提供的接口获取可视区域的高度和滚动高度
				// let query=uni.createSelectorQuery()
				// let container=query.select('.box');
				container.fields({
				    rect:true,        //是否返回节点布局位置信息{left,top,right,bottom}
				    size:true,        //是否返回节点尺寸信息{width，height}
				    scrollOffset:true //是否返回节点滚动信息{scrollLeft,scrollTop}
				},(res)=>{
				     // console.log(res)
					 if(typeof res == 'object' && res !=null){
						 this.rankTop = res.top * 2 //更换为rpx
					 }
				}).exec()
			},
			requestData() {
				console.warn('==smallTheater--requestData==');
				let id = this.data.id
				let url = interfaces.square_block_rankinglist + id + ".json";
				let self = this
				this.request({
					url:url,
					methods:"GET",
					success:(res)=> {
						console.log(129,res)
						
						self.bannerData = res.content[0]
						self.jumpData = res.content[1]
						self.handpickData = res.content[2]
						self.rankData = res.content[3]
						self.goodVideoData = res.content[4]
						
						// 本周精选分页数据
						let data = self.handpickData.lists					
						for(var i=0; i<data.length; i+=3) {
							let pagingData = data.slice(i, i+3)
							self.handpickPagingList.push(pagingData)
						}
						console.log(self.handpickPagingList);
						this.$refs.paging.complete(self.handpickPagingList);
					},
					fail:(error)=> {
						console.log("错误 错误 错误:" + error + ":" + url)
					}
				})
			},
			onScroll(e) {
				// console.log("yyy:" + e.detail.scrollTop)
				this.scroll_y = e.detail.scrollTop
				this.$emit("onScroll", e)				
			},
			clickToItemJumpVideo(res) {
				// console.log(res.playlet_id, res.name, res.last_episode_number)
				let data = {playlet_id:res.playlet_id, 
				            name:res.name, 
					        last_episode_number:res.last_episode_number}
				tools.jump_video_page_by_info(data)
			}
		}
	}
</script>

<style lang="scss">
	.smallTheater_content{
		height: 100%;
		background-color: #f8f8f8;
		
		.info{
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			height: 100%;
		}
	}
	
</style>
